<template>
  <div class="interfaceName">
    <div class="interfaceName-content">
      <a href="//www.mi.com" title="小米官网" class="logo"
        ><img
          src="https://cdn.cnbj1.fds.api.mi-img.com/mi.com-assets/shop/img/logo-mi2.png"
          alt=""
      /></a>
      <div class="interfaceName-text">
        <h2 class="interfaceName-title">
          {{
            $route.path === "/shopping"
              ? "我的购物车"
              : $route.path === "/settlement"
              ? "确认订单"
              : ""
          }}
        </h2>
        <p class="hint" v-show="$route.path === '/shopping'">
          温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算
        </p>
      </div>
    </div>
    <router-link to="/order" class="myOder">我的订单</router-link>
  </div>
</template>

<script lang="ts">
export default {
  name: "header",
};
</script>

<script lang="ts" setup></script>

<style scoped>
.interfaceName {
  width: 1226px;
  height: 74px;
  background-color: white;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  margin-top: 24px;
  align-items: center;
}
.interfaceName-content {
  display: flex;
  align-items: center;
}
.interfaceName-text {
  display: flex;
}
.interfaceName-title {
  width: 140px;
  height: 48px;
  font-size: 28px;
  color: #424242;
}

.logo {
  width: 93px;
  height: 48px;
  margin-bottom: 20px;
}
.logo img {
  width: 48px;
  height: 48px;
}

.myOder {
  width: 80px;
  height: 40px;
  font-size: 12px;
  color: #757575;
  margin: 15px 0 0 15px;
}
.myOder:hover {
  color: #ff6700;
}
.hint {
  width: 336px;
  height: 20px;
  font-size: 12px;
  margin: 15px 0 0 15px;
  color: #757575;
}
</style>
